import styled from 'styled-components'
import img from '@img/all.png'
export const StyledMccMtVideo = styled.div`
	height: 100%;
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.body {
		overflow-y: auto;
		width: 298px;
		width: 100%;
		box-sizing: border-box;
		.table-title-wrap {
			display: flex;
			align-items: center;
			height: 36px;
			.table-title {
				flex: 1;
			}
			.icon-wrap {
				display: flex;
				align-items: center;
				.icon-text {
					margin-right: 6px;
				}
				.icon-text.last {
					margin-right: 0px;
				}
			}
		}
		.kd-table-body-row .cell-inner {
			font-size: 12px;
			.kd-tag-default {
				display: flex;
			}
			.red {
				color: red;
			}
		}
		.kd-table-body-row.kd-table-body-row-selected {
			.read-btn-icon {
				background-position: -57px -1778px;
			}
			.edit-btn-icon {
				background-position: -133px -1778px;
			}
		}
		.icon-wrap {
			cursor: pointer;
			margin-left: 1px;
			&:hover {
				.start-btn-icon {
					background-position: -17px -2114px;
				}
				.pause-btn-icon {
					background-position: -147px -2114px;
				}
				.end-btn-icon {
					background-position: -83px -2114px;
				}
			}
		}
	}
`
export const StartBtnIcon = styled.div`
	width: 16px;
	height: 16px;
	background-image: url(${img});
	background-position: -1px -2114px;
	cursor: default;
	&:hover,
	&:active {
		cursor: pointer;
		background-position: -17px -2114px;
	}
`
export const PauseBtnIcon = styled.div`
	width: 16px;
	height: 16px;
	background-image: url(${img});
	background-position: -131px -2114px;
	cursor: default;
	&:hover,
	&:active {
		cursor: pointer;
		background-position: -147px -2114px;
	}
`
export const EndBtnIcon = styled.div`
	width: 16px;
	height: 16px;
	background-image: url(${img});
	background-position: -67px -2114px;
	cursor: default;
	&:hover,
	&:active {
		background-position: -83px -2114px;
		cursor: pointer;
	}
`
export const EditBtnIcon = styled.div`
	width: 16px;
	height: 16px;
	background-image: url(${img});
	background-position: -75px -1778px;
	cursor: default;
	&:hover,
	&:active {
		background-position: -133px -1778px;
		cursor: pointer;
	}
`
export const ReadBtnIcon = styled.div`
	width: 16px;
	height: 16px;
	background-image: url(${img});
	background-position: -0px -1778px;
	cursor: default;
	&:hover,
	&:active {
		background-position: -57px -1778px;
		cursor: pointer;
	}
`
export const StyledUpdateVideoModalContent = styled.div`
	.content {
		padding: 30px;
		padding-top: 40px;
		padding-bottom: 0px;
	}
`
export const StyledUpdateVideoModalFooter = styled.div`
	display: flex;
	justify-content: center;
	margin: 10px 0px 20px;
	.kd-button {
		margin: 0 3px !important;
	}
`
